<template>
  <div class="app">
    <div class="content">
      <div class="showGif">
        <img src="@/assets/img/hy2.gif" class="imageShow" alt="" style="vertical-align: middle" />
      </div>
      <!--      <div class="opt-div">-->
      <div class="enterprise" @click="toEnterprise"></div>
      <div class="custom" @click="toCustom"></div>
      <!--      </div>-->
    </div>
  </div>
</template>

<script>
export default {
  name: 'courseLogin',
  methods: {
    toEnterprise() {
      this.$router.replace({ name: 'enterpriseLogin' });
    },
    toCustom() {
      this.$router.replace({ name: 'customLogin' });
    }
  }
};
</script>

<style scoped>
.app {
  background-image: url('~@/assets/img/bg.png');
  background-size: cover;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 让父容器充满整个视口高度 */
}

.app .content {
  width: 80%;
  height: 60%;
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中 */
}

.app .content div {
  flex: 1;
  /*border: 1px solid #000; !* 边框仅为了展示效果 *!*/

  width: 26%;
  height: 85%;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}

.app .content .enterprise {
  background-image: url('~@/assets/img/enterprise.png');
}

.app .content .custom {
  background-image: url('~@/assets/img/custom.png');
}

.showGif {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.imageShow {
  width: 250px;
}
</style>
